Array 객체 메서드

✒️ 2025-05-23 17:04 내용 수정

concat

• concat : 두 배열을 합쳐 새 배열을 만들고 기존 배열은 바뀌지 않음

let arr = [0, 1, 2];
let arr2 = [4, 5, 6];

let arr3 = arr.concat(arr2);

join

• join : 배열의 요소들을 하나의 문자열로 합침

let arr = [0, 1, 2];
let arr_str = arr.join();
let arr_str2 = arr.join('|'); // 구분자 추가

push

• push : 배열의 마지막에 새 요소를 추가하고 새 배열의 길이 반환

let arr = [0, 1, 2];
arr.push(3, 4, 5); // 배열의 마지막에 3, 4, 5를 추가

unshift

• unshift : 배열의 시작에 새 요소 추가

let arr = [0, 1, 2];
arr.unshift(3); // 배열의 앞에 3, 4, 5를 추가

pop

• pop :배열의 마지막 요소를 꺼내고 그 값을 반환

let arr = [0, 1, 2];
arr.pop(); // 2를 꺼내 반환하고, arr = [0, 1]

shift

• shift : 배열의 첫 요소를 꺼내고 그 값을 반환

let arr = [0, 1, 2];
arr.shift(); // 0을 반환하고, arr = [1, 2]

splice

• splice : 배열의 요소를 추가하거나 삭제하며, 기존 배열도 변경됨
• splice(idx) : idx 위치의 요소부터 배열의 마지막까지의 요소를 제거하고, 제거한 배열을 반환
• splice(idx, n) : idx 위치의 요소부터 n개의 요소를 제거하고, 제거한 배열을 반환
• splice(idx, n, newElement) : idx 위치의 요소부터 n개의 요소를 제거하고 삭제한 위치에 새 요소를 추가

let arr = [0, 1, 2, 3, 4, 5];
arr.splice(2); // 2번 인덱스인 2부터 5까지를 제거, 반환은 [2, 3, 4, 5]

arr.splice(3, 2); // 3번 인덱스인 3부터 2개의 요소 제거, 반환은 [3, 4]

arr.splice(1, 2, 8); // 1번 인덱스인 1부터 2개 요소인 1과 2를 제거하고, 8을 추가
// splice 반환은 [1, 2]이며, arr은 [0, 8, 3, 4, 5]

slice

• slice : 배열의 특정 부분을 잘라내며, 기존 배열은 유지됨
• slice(idx) : idx 위치의 요소부터 배열의 마지막까지의 요소를 꺼내서 반환
• slice(idx1, idx2) : idx1 위치의 요소부터 (idx2 - 1) 위치의 요소까지 꺼내서 반환

let arr = [1, 2, 3, 4, 5];
arr.slice(3); // 3번 인덱스부터 마지막까지 꺼냄, 반환은 [3, 4, 5]
arr.slice(2, 4); // 2번 인덱스 2부터 4번 인덱스 직전인 3번 인덱스 3까지 꺼냄, 반환은 [2, 3]

forEach

• forEach : 각 배열 요소에 제공된 함수를 오름차순 인덱스 순서로 한 번씩 실행
• 항상 undefined를 반환하기 때문에 chaining할 수 없다.
• forEach는 호출되는 배열을 변경하지 않지만, callbackFn으로 제공되는 함수는 배열을 변경할 수 있다. 하지만 배열의 길이는 callbackFn을 처음 호출하기 전에 저장된 값을 사용한다.
• 참고 자료 : mdn web docs Array forEach

forEach(callbackFn)
forEach(callbackFn)

let callbackFn = (element, index, array) => { 
	// 각 배열 요소에 실행할 내용
	// element : 요소
	// index : 인덱스
	// array : 대상 배열
}

let arr = [1, 2, 3, 4, 5];
arr.forEach((el, i) => {
	console.log(`${i}번째 요소 : ${el}`)
})

// 0번째 요소 : 1
// 1번째 요소 : 2
// 2번째 요소 : 3
// 3번째 요소 : 4
// 4번째 요소 : 5

map

• map : 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새 배열로 반환
• callback 함수는 undefined를 포함해 배열 값이 들어있는 인덱스에 대해서만 호출된다.
• thisArg가 전달된 경우 callback 함수의 this값이 사용되고, 그 외의 경우엔 undefined의 this 값이 사용된다.
• map 자체는 원본 배열을 변형하지 않지만, callback 함수에 의해 배열이 변형될 수 있다.
• 참고 자료 : mdn web docs Array map

arr.map(callback(currentValue[, index[, array]])[, thisArg]);
// currentValue : 처리할 현재 요소
// index : 처리할 현재 요소의 인덱스
// array : 대상 배열
// thisArg : callback을 실행할 때 this로 사용되는 값

sort

• sort : 배열 내의 모든 요소에 각각에 대해 주어진 함수를 기준으로 정렬한 배열을 반환
• 원본 배열이 변경되므로, 원본 배열의 순서를 유지하고 싶다면 복사본을 만들어 정렬해야 한다.
• javascript의 정렬은 유니코드 포인트값을 기준으로 정렬하기 때문에 숫자 정렬 시 문자열로 변환하여 정렬하여 원하지 않는 결과가 나올 수 있다.
• 따라서 compareFunction을 사용하면 특정 기준으로 정렬하도록 설정할 수 있다.
• 참고 자료 : 알짜배기 프로그래머 Javascript Array Object 정렬 숫자 한글 키 값 정렬, 컬쳐N라이프 자바스크립트 array sort

arr.sort((a, b) => { // 오름차순
	if (a < b) return -1;
	if (a > b) return 1;
	return 0;
})

// 위의 형태를 더 간단하게 작성하면 아래와 같다
arr.sort((a, b) => {
	return a - b;
})

arr.sort((a, b) => { // 내림차순
	if (a < b) return 1;
	if (a > b) return -1;
	return 0;
})

// 위의 형태를 더 간단하게 작성하면 아래와 같다
arr.sort((a, b) => {
	return b - a;
})

• 한글끼리 비교 후 정렬 시 localeCompare를 사용하는 것이 정확했다.
• 참고 자료 : JS 문자열 배열 정렬

arr.sort((a, b) => {
	return a.localeCompare(b);
})

filter

• filter : 배열 내의 모든 요소 각각에 대해 주어진 조건을 만족하는 요소들로만 이루어진 새 배열을 반환

arr.filter((el) => {return (el > 10)})

let dateCut = new Date(2020, n-1, 2).toISOString().substring(0, 10);
arr2.filter((el) => {return (el.date < dateCut)})

find

• find : 배열에서 조건을 만족(테스트 함수)를 만족하는 첫 번째 요소를 반환하고, 만족하는 값이 없다면 undefined를 반환
• find()는 호출한 배열을 변경하지 않지만 callback 함수는 배열을 변경할 수 있다.
  • find 참고 자료 : mdn web docs Array find
• findIndex() : 배열에서 찾은 요소의 인덱스가 필요한 경우
• indexOf() : 값의 인덱스가 필요한 경우, 테스트 함수를 사용하는 것 대신 각 요소가 비교값과 동일한지 확인함
• includes() : 배열에 값이 존재하는지 찾아야 하는 경우, 테스트 함수를 사용하는 것 대신 각 요소가 비교값과 동일한지 확인함
• some() : 조건(테스트 함수)를 만족하는 요소가 있는지 찾아야 하는 경우

arr.find((el, i, arr) => ({
	// el : element
	// i : index
	// arr : array
	return (el.id == 2);
});